<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>admin table</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>
<!--<div onclick="openAdd()" style="margin-left: 2%;margin-top: 10px">-->
<!--    <button type="button" class="layui-btn">添加订单</button>-->
<!--</div>-->
<div class="layui-form" lay-filter="layuiadmin-app-form-list" style="margin: 10px 20px">
    <table id="list" lay-filter="list"></table>

</div>
<div id="openAdd" class="layui-row" hidden>
    <div style="margin-left: 10%;margin-top: 20px;width: 80%">
        <form lay-filter="addForm" class="layui-form" action="">
            <input name="id" type="number" hidden/>
            <div class="layui-form-item">
                <label class="layui-form-label">收货人</label>
                <div class="layui-input-block">
                    <input type="text" name="received_name" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">收货地址</label>
                <div class="layui-input-block">
                    <input type="text" name="received_address" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-block">
                    <input type="text" name="received_tel" required lay-verify="required"
                           onkeyup="value=value.replace(/^(0+)|[^\d.]+/g,'')" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">订单状态</label>
                <div class="layui-input-block">
                    <select name="state" lay-verify="">
                        <option value="1">待付款</option>
                        <option value="2">已付款</option>
                        <option value="5">已完成</option>
                        <option value="6">已评价</option>
                        <option value="7">已取消</option>
                        <option value="8">用户拒收</option>
                        <option value="9">申请退款</option>
                        <option value="10">退款完成</option>
                        <option value="11">退款驳回</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="submit" type="button" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

</div>
<div id="openOrderGoodsList" class="layui-row" hidden>
    <div class="layui-form" lay-filter="layuiadmin-app-form-list" style="margin: 10px 20px">
        <table id="orderGoods" lay-filter="orderGoodsList"></table>
        <!--        <div style="text-align: center;">-->
        <!--            <button id="bind" type="button" class="layui-btn">立即绑定</button>-->
        <!--        </div>-->
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script src="../layui/layui.js"></script>
<script>
    var tree;
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#list',
            // height: 312,
            url: 'orderList?needData=1', //数据接口//
            request: {
                limitName: 'size' //每页数据量的参数名，默认：limit
            },
            parseData: function (res) { //res 即为原始返回的数据
                if (res.code == 200)
                    res.code = 0
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            page: true,//开启分页
            cols: [[ //表头
                {field: 'id', title: 'ID', width: '100'},
                {field: 'out_trade_no', title: '订单号', width: '100'},
                {
                    field: 'origin', title: '来源', width: '100', templet: function (d) {
                        show = '异常'
                        if (d.origin == 1)
                            show = '美国'
                        if (d.origin == 2)
                            show = '欧洲'
                        return show
                    }
                },
                {
                    field: 'state', title: '付款状态', width: '100', templet: function (d) {
                        var show = '异常'
                        switch (d.state) {
                            case 1:
                                show = '待付款'
                                break;
                            case 2:
                                show = '已付款'
                                break;
                            case 5:
                                show = '已完成'
                                break;
                            case 6:
                                show = '已评价'
                                break;
                            case 7:
                                show = '已取消'
                                break;
                            case 8:
                                show = '用户拒收'
                                break;
                            case 9:
                                show = '申请退款'
                                break;
                            case 10:
                                show = '退款完成'
                                break;
                            case 11:
                                show = '退款驳回'
                                break;
                        }
                        return show
                    }
                },
                {field: 'money', title: '应付金额', width: '100'},
                {field: 'origin_money', title: '总价', width: '100'},
                {field: 'delivery_money', title: '配送费', width: '100'},
                {field: 'received_name', title: '收货人', width: '100'},
                {field: 'received_address', title: '收货地址', width: '100'},
                {field: 'received_tel', title: '联系电话', width: '150'},
                {
                    field: 'pay_mode', title: '付款方式', width: '100', templet: function (d) {
                        var show = '异常'
                        if (d.pay_mode == 1)
                            show = '美国'
                        if (d.pay_mode == 2)
                            show = '欧洲'
                        return show
                    }
                },

                {field: 'pay_time', title: '支付时间', width: '200'},
                {field: 'create_time', title: '创建时间', width: '200'},
                {field: 'update_time', title: '更新时间', width: '200'},
                {
                    fixed: 'right', title: '操作', width: '200', templet: function (d) {
                        if (d.state == 9)
                            show = '<a class="layui-btn layui-btn-xs" lay-event="refund_success">退款完成</a>\n'
                        else
                            show = ''
                        show = show +
                            '<a class="layui-btn layui-btn-xs" lay-event="view">查看</a>\n' +
                            '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>\n' +
                            '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'
                        return show
                    }
                }
            ]],
            text: {
                none: '暂无数据' //默认：无数据。
            },
            defaultToolbar: ['filter'],
        })
        table.on('tool(list)', function (obj, table) {
            // var data = obj.data; //获得当前行数据
            // if (layEvent == 'edit') {
            //     window.location = 'editPsw.html?aid=' + data.admin_id
            // }
            switch (obj.event) {
                case 'refund_success':
                    layer.confirm('确定该订单已退款？', function (index) {
                        obj.data['state'] = 10
                        edit(obj.data, function (res) {
                            if (res.code != 200) {
                                layer.msg(res.error)
                            } else {
                                layer.msg('修改成功')
                                location.reload()
                            }
                        })
                    })
                    break;
                case 'view':
                    openOrderGoodsList(obj)
                    break;
                case 'edit':
                    openEdit(obj.data)
                    break;
                case 'del':
                    layer.confirm('确定删除该订单？', function (index) {
                        obj.data['deleted'] = 1
                        edit(obj.data, function (res) {
                            if (res.code != 200) {
                                layer.msg(res.error)
                            } else {
                                layer.msg('修改成功')
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                            }
                        })
                    });
                    break;

            }
        });

    });


    function edit(data, callback) {
        $.ajax({
            url: 'editOrder',
            type: 'POST',
            data: data,
            dataType: 'json',
            success: function (res) {
                if (callback != undefined) {
                    callback(res)
                } else {
                    if (res.code != 200) {
                        layer.msg(res.error)
                    } else {
                        layer.msg('修改成功')
                    }
                }
            },
        });
    }

    function openOrderGoodsList(obj) {
        // $('#bind').on('click', function () {
        //     var data = {}
        //     data['goodsId'] = obj.data['id']
        //     data['add'] = []
        //     data['del'] = []
        //     $('input[name=speId]').each(function () {
        //         var status = $(this).prop('checked')
        //         var v = $(this).val()
        //         if (status == true) {
        //             var rel = {}
        //             rel['spe_id'] = v
        //             rel['goods_id'] = data['goodsId']
        //             data['add'].push(rel)
        //         } else {
        //             data['del'].push(v)
        //         }
        //     })
        //     console.log(data)
        //     $.ajax({
        //         url: 'editSpecificationsRelationship',
        //         type: 'POST',
        //         data: data,
        //         dataType: 'json',
        //         success: function () {
        //             location.reload()
        //         }
        //     })
        // })
        layer.open({
            type: 1,
            content: $('#openOrderGoodsList'),
            area: ["500px", "400px"],
            title: '订单商品信息',
            anim: 1,
            success: function () {
                layui.use('table', function () {
                    var table = layui.table;
                    //第一个实例
                    table.render({
                        id: 'orderGoods',
                        elem: '#orderGoods',
                        height: 300,
                        url: 'orderGoodsList?orderId=' + obj.data['id'], //数据接口//
                        request: {
                            limitName: 'size' //每页数据量的参数名，默认：limit
                        },
                        parseData: function (res) { //res 即为原始返回的数据
                            if (res.code == 200)
                                res.code = 0
                            return {
                                "code": res.code, //解析接口状态
                                "msg": res.message, //解析提示文本
                                "count": res.data.total, //解析数据长度
                                "data": res.data.data //解析数据列表
                            };
                        },
                        page: true,//开启/分页
                        cols: [[ //表头
                            {field: 'name', title: '商品名称', width: '100'},
                            {
                                field: 'icon', title: '商品主图', width: '100', templet: function (d) {
                                    return '<div><a href="#" onclick="openImg();">点击查看</a><img id="showImg" src="' + d.icon + '" width="370px" style="display: none"></div>'
                                }
                            },
                            {field: 'price', title: '商品价格', width: '100'},
                            {field: 'spe_name', title: '规格名称', width: '100'},
                            {field: 'spe_price', title: '规格价格', width: '100'},
                            {field: 'num', title: '数量', width: '100'},
                            {field: 'promotion_money', title: '促销价格', width: '100'},
                            {field: 'money', title: '总价', width: '100'},
                            {
                                field: 'type', title: '商品状态', width: '100', templet: function (d) {
                                    var show = '异常'
                                    switch (d.type) {
                                        case '1':
                                            show = '正常'
                                            break;
                                        case '2':
                                            show = '促销'
                                            break;
                                        case '3':
                                            show = '推荐'
                                            break;
                                    }
                                    return show
                                }
                            },
                            {field: 'create_time', title: '创建时间', width: '200'},
                        ]],
                    })

                })
            }
        })
    }

    // function openAdd() {
    //     layer.open({
    //         type: 1,
    //         content: $('#openAdd'),
    //         area: ["500px", "500px"],
    //         title: '添加订单',
    //         anim: 1
    //     });
    //     $('button[type=reset]').click()
    // }

    function openEdit(data) {
        layer.open({
            type: 1,
            content: $('#openAdd'),
            area: ["500px", "500px"],
            title: '编辑订单信息',
            anim: 1,
            success: function () {
                form = layui.form
                form.val('addForm', data)
            }
        });
    }

    //Demo
    layui.use('form', function () {
        var form = layui.form;

        $('#submit').on('click', function () {
            var formData = form.val('addForm')
            if (formData['id'] <= 0)
                delete formData['id']
            else {
                edit(formData, function (res) {
                    if (res.code != 200) {
                        layer.msg(res.error)
                    } else {
                        layer.msg('修改成功')
                        location.reload()
                    }
                })
                return
            }
            $.ajax({
                url: 'addSpecifications',
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function (res) {
                    if (res.code != 200) {
                        layer.msg(res.error)
                    } else {
                        layer.msg('添加成功')
                        location.reload();
                    }
                }, error: function (res) {
                    layer.msg()
                }
            })
        })
    });

    /*查看大图*/
    function openImg() {
        var idBar = '#showImg';
        var src = $(idBar)[0].src;
        var width = $(idBar).width();
        var height = $(idBar).height();
        var scaleWH = width / height;
        var bigH = 550;
        var bigW = scaleWH * bigH;
        if (bigW > 1000) {
            bigW = 1000;
            bigH = bigW / scaleWH;
        } // 放大预览图片
        parent.layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            shadeClose: true,
            area: [bigW + 'px', bigH + 'px'], //宽高
            content: '<img width="' + bigW + '" src="' + src + '" />'
        });
    }
</script>
</body>
</html>
